page {
  background-color: #23262D;
}

.header {
  width: calc(100% - 60rpx);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;

  .location {
    width: 120rpx;
    display: flex;
    justify-content: space-between;

    .city {
      opacity: 0.78;
      font-family: PingFangSC-Regular;
      font-size: 28rpx;
      color: #DFDFDF;
      width: 85rpx;
      line-height: 60rpx;
    }

    image {
      width: 26rpx;
      height: 14rpx;
      margin-top: 23rpx;
    }
  }

  .search {
    width: 518rpx;
    height: 60rpx;
    background: #33363D;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.33);
    border-radius: 26rpx;
    display: flex;
    margin-left: 10rpx;

    image {
      width: 28rpx;
      height: 28rpx;
      margin: 16rpx 20rpx;
    }

    .search-info {
      font-family: PingFangSC-Regular;
      font-size: 28rpx;
      color: #7A7A7A;
      line-height: 60rpx;
    }
  }
  .date image{
    width: 38rpx;
    height: 38rpx;
    margin-left: 10rpx;
    margin-top: 11rpx;
  }
}

.swiper{
  width: 100%;
  height: 290rpx;
  margin-top: 35rpx;
 swiper{
  width: 100%;
  height: 290rpx;
}
 .swiper-item{
   width: 100%;
   height: 290rpx;
   padding: 0 8rpx;
   box-sizing: border-box;
   image{
     width: 100%;
     height: 100%;
     border-radius: 26rpx;
   }
 }
}
  
.con-head{
  width: calc(100% - 60rpx);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  .head-left{
    width: 170rpx;
    height: 36rpx;
    display: flex;
    justify-content: space-between;
    .head-box{
      width: 8rpx;
      height: 36rpx;
      background-image: linear-gradient(90deg, #F26182 5%, #F1A064 100%);
    }
    .head-title{
      margin-left: 15rpx;
      font-family: PingFangSC-Medium;
      font-size: 36rpx;
      line-height: 36rpx;
      color: #DFDFDF;
    }
  }
  .head-right{
    width: 75rpx;
    height: 36rpx;
    display: flex;
    justify-content: space-between;
    .head-all{
      opacity: 0.78;
font-family: PingFangSC-Regular;
font-size: 24rpx;
margin-top: 12rpx;
color: #DFDFDF;
    }
    image{
      width: 22rpx;
      height: 12rpx;
      margin-top: 24rpx;
      transform: rotate(-90deg);
    }
  }
}

.hot{
  width: 100%;
  margin-top: 30rpx;
  .hot-cont{
    margin-top: 25rpx;
    margin-left: 30rpx;
    overflow: auto;
    display: flex;
    .film{
      width: 180rpx;
      margin-right: 30rpx;
      .img{
        width: 180rpx;
        position: relative;
        margin-bottom: 15rpx;
        image{
          width: 180rpx;
          height: 244rpx;
          border-radius: 12rpx;
        }
        .socer{
          position: absolute;
          left: 10rpx;
          bottom: 25rpx;
          font-family: PingFangSC-Regular;
          font-size: 18rpx;
          color: #DFDFDF;
        }
      }
      .film-name{
        width: 150rpx;
        margin-bottom: 15rpx;
        font-family: PingFangSC-Medium;
        font-size: 24rpx;
        color: #DFDFDF;
        overflow: hidden; 
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .buy{
        background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
        box-shadow: 0 8rpx 32rpx 0 rgba(0,0,0,0.50);
        border-radius: 22px;
        width: 100rpx;
        height: 44rpx;
        line-height: 44rpx;
        text-align: center;
        font-family: PingFangSC-Medium;
        font-size: 24rpx;
        color: #DFDFDF;
        text-shadow: 0 4rpx 8rpx rgba(49,49,49,0.50);
      }
    }
    .hot-last{
      padding-right: 30rpx;
    }
  }
}

.new{
  width: 100%;
  margin-top: 50rpx;
  .new-cont{
    margin-top: 25rpx;
    margin-left: 30rpx;
    overflow: auto;
    display: flex;
    .movie{
      width: 240rpx;
      margin-right: 20rpx;
      image{
          width: 240rpx;
          height: 324rpx;
          border-radius: 12rpx;
          margin-bottom: 15rpx;
      }
      .movie-name{
        width: 190rpx;
        margin-bottom: 15rpx;
        font-family: PingFangSC-Medium;
        font-size: 28rpx;
        color: #DFDFDF;
        overflow: hidden; 
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .new-date{
        opacity: 0.55;
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        color: #DFDFDF;
      }
    }
    .new-last{
      padding-right: 30rpx;
    }
  }
}

.preview{
  width: 100%;
  margin: 50rpx 0;
  .pre-cont{
    margin-top: 25rpx;
    margin-left: 30rpx;
    overflow: auto;
    display: flex;
    .pre-movie{
      width: 590rpx;
      margin-right: 25rpx;
      image{
          width: 590rpx;
          height: 320rpx;
          border-radius: 12rpx;
          margin-bottom: 15rpx;
      }
      .pre-name{
        width: 560rpx;
        font-family: PingFangSC-Medium;
        font-size: 26rpx;
        color: #DFDFDF;
        overflow: hidden; 
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .pre-last{
      padding-right: 30rpx;
    }
  }
}